<template>
  <el-carousel :interval="5000" arrow="always" height="400px">
    <el-carousel-item v-for="item in imgTable" :key="item">
      <img :src="item.src" alt="" />
    </el-carousel-item>
  </el-carousel>
  <div style=" height: 100px;  display: grid; place-items: center;">

    <h2 style="text-align: center;">欢迎使用宿舍管理系统</h2>
    
  </div>
  
  <el-row>
    <el-col :span="8">
      <el-statistic title="当前学生数量" :value="studentCount" />
    </el-col>

    <el-col :span="8">
      <el-statistic title="宿舍总量" :value="dorCount" />
    </el-col>
    <el-col :span="8">
      <el-statistic title="待缴费金额" :value="mm">
      </el-statistic>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useTransition } from '@vueuse/core'
import {getAll } from '@/servers/modules/index'


const studentCount = ref('')
const dorCount = ref('')
const mm = ref('')

const source = ref(0)

const imgTable = ref([
  {
    src: 'https://ts1.cn.mm.bing.net/th/id/R-C.ee5621f04e010cad6e234e48094935f2?rik=FVX8gMAkmEZNyw&riu=http%3a%2f%2f3d.jzsc.net%2fupload%2fimg%2f2021-12-19%2fdfddabdc-a4f4-4083-97aa-5b6930d50945.jpg&ehk=hUKzFnTnr2umCdax%2bo5pjGwP9HCdRism8A20E9C1TM0%3d&risl=&pid=ImgRaw&r=0',
    title: '图片1',
  },
  {
    src: 'https://cn.bing.com/images/search?view=detailV2&ccid=0rxWjJd7&id=D2EBC81F16F5BB5A48E86084321EDCC60AA9C20A&thid=OIP.0rxWjJd7l3jVv4O7oluFFwHaFj&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.d2bc568c977b9778d5bf83bba25b8517%3frik%3dCsKpCsbcHjKEYA%26riu%3dhttp%253a%252f%252fwww.jdxzz.com%252fuploads%252fimage%252f20220920%252f1663654971374727.jpg%26ehk%3dP3SNYqLKaBXsTKNxAamARbGgfY3ytuKkRa627rFLPqQ%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=810&expw=1080&q=%e5%ae%bf%e8%88%8d%e7%85%a7%e7%89%87+1200*400&simid=608029072125986745&FORM=IRPRST&ck=8673D6551A161271C5D21E75DE9C1EBC&selectedIndex=121&itb=0',
    title: '图片2',
  }
])
source.value = 172000

onMounted(async () => {
  const res = await getAll()
  studentCount.value = res.data.studentCount
  dorCount.value = res.data.dormitoryCount
  mm.value = res.data.allDollar
  console.log('我也不知道什么数据',res);
  
})
</script>

<style scoped>
.el-col {
  text-align: center;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
